<template >
    <el-row :gutter="20">
      <el-col v-for="card in cards" :span="6" >
        <el-card shadow="always" class="h-full flex flex-col">
          <template #header>
            <div class="flex-x-between">
              <span class="text-gray">{{ card.title }}</span>
              <el-tag :type="card.color" size="small">{{ card.key }}</el-tag>
            </div>
          </template>

          <div class="flex-x-between mt-2 flex-1">
            <div class="flex-y-center">
              <span class="text-lg transition-all duration-300 hover:scale-110">
                {{ card.num }}
              </span>
              <!-- <span class="ml-2 text-xs text-[#f56c6c]">
                <el-icon><Failed /></el-icon>
                未连接
              </span> -->
            </div>
            <div class="i-svg:people w-8 h-8 animate-[pulse_2s_infinite]" />
          </div>

          <div class="flex-x-between mt-2 text-sm text-gray">
            <span>左下角</span>
            <span>右下角</span>
          </div>
        </el-card>

      </el-col>
    </el-row>
    
</template>
<script setup name="SummaryCard" lang="ts" >

    import { SummaryCardsType } from "@/types/summary-card";

    withDefaults(defineProps<{cards?:SummaryCardsType}>(),{
        cards:()=>[{key:'key',title:'title',num:0,color:'primary'}]
    })

</script>
<style lang="">
    
</style>